<template>
	<view class="merchant-item" v-if="detail">
		<view class="merchant-item-top-wrapper">
			<view class="merchant-info-top">
				<view class="merchant-name">
					{{detail.merchant_name}}
				</view>
				<view class="merchant-amount">
					￥{{detail.month_trade}}
				</view>
			</view>
			<view class="merchant-info-bottom">
				<view class="merchant-phone">
					{{detail.customer_phone}}
				</view>
				<view class="merchant-amount-label">
					本月交易量(元)
				</view>
			</view>
		</view>
		<view class="merchant-item-bottom-wrapper">
			<view class="merchant-createtime">
				注册时间：{{detail.open_time}}
			</view>
			<view class="merchant-detail-btn" @click="jump">
				查看详情
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps } from 'vue';
	import type { IMerchant } from './types';

	interface IProps {
		detail : IMerchant | null
	}
	const props = withDefaults(defineProps<IProps>(), {
		detail: null,
	})

	const jump = () : void => {
		uni.router.route({
			url:'/pages_merchant/merchant_detail/merchantDetail',
			params:{
				model_sn:props.detail!.model_sn,
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./merchantItem.scss";
</style>